<template>
  <div class="flow-content">
    <!-- 流程引擎 -->
    <flowEditor
      v-if="flowData.modelId && showFlow"
      ref="flowEditor"
      :config="config"
      @btn-save-click="handleSaveBtn"
      :contextmenuList="contextmenuList"
      @editorInitCompleted="editorInitCompleted"
      @oncontextmenu="handleContextmenu"
      @doubleClick="doubleClick"
      @doubleClickToChangeVal="doubleClickToChangeVal"
      @clickContextmenuCommand="handleContextmenuCommand"
      @selection-changed="selectionChanged"
    >
      <template slot="paletteWrapper" slot-scope="scope">
        <div id="paletteHelpWrapper" class="paletteHelpWrapper" v-if="scope.editorManager">
          <div class="stencils" id="paletteSection">
            <template v-for="group in scope.editorManager.showStencilData">
              <div :key="group.id" v-if="group.visible && group.items" class="stencil-group">
                <p class="group-name">{{ group.name }}</p>
                <ul :key="group.id" v-if="group.visible && group.items">
                  <li v-for="item in group.paletteItems" :key="item.id">
                    <stencil-drag-item :item="item" :editorManager="scope.editorManager"></stencil-drag-item>
                  </li>
                </ul>
              </div>
            </template>
          </div>
        </div>
      </template>
      <!-- 底部属性显示区域table -->
      <template slot="propertyWrapper" slot-scope="scope">
        <span>{{ stateEditorManager(scope.editorManager) }}</span>
        <!-- <propertySection
          v-if="scope.editorManager && scope.editorManager.modelData.model"
          :modelData="scope.editorManager.modelData.model"
        ></propertySection> -->
      </template>
    </flowEditor>

    <!-- 保存模型弹窗 -->
    <el-dialog title="保存流程" class="save-dialog" :visible="saveVisible" append-to-body @close="close" width="60%">
      <div
        v-if="saveDialog.errorMessage && saveDialog.errorMessage.length > 0"
        class="alert error"
        style="font-size: 14px; margin-top:20px"
      >
        <div class="popup-error" style="font-size: 14px">
          <span class="glyphicon glyphicon-remove-circle"></span>
          <span>{{ saveDialog.errorMessage }}</span>
        </div>
      </div>
      <el-form label-width="46px" :model="nodeObjProperties" class="demo-form-inline">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="名称">
              <el-input
                :disabled="saveLoading || (error && error.conflictResolveAction == 'saveAs')"
                v-model="saveDialog.name"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="Key">
              <!-- <el-input
                :disabled="saveLoading || (error && error.conflictResolveAction == 'saveAs')"
                v-model="saveDialog.key"
                placeholder="请输入"
              ></el-input> -->
              <el-input :disabled="true" v-model="saveDialog.key" placeholder="请输入"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="描述">
          <el-input
            :disabled="saveLoading"
            class="form-control"
            v-model="saveDialog.description"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div>
          <el-button @click="close" :disabled="saveLoading">取消</el-button>
          <el-button
            type="primary"
            @click="save"
            :disabled="
              (saveDialog.name && saveDialog.name.length === 0) || (saveDialog.key && saveDialog.key.length === 0)
            "
          >
            保存
          </el-button>
        </div>
      </span>
    </el-dialog>

    <!-- 编辑节点信息 -->
    <el-dialog
      class="edit-dialog"
      :title="writeDialog.title"
      :visible.sync="writeDialog.visible"
      :close-on-click-modal="false"
      width="70%"
      :before-close="handlepropertyWriteClose"
    >
      <div>
        <div class="node-content">
          <el-form label-width="86px" :model="nodeObjProperties" class="demo-form-inline">
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form-item label="编号">
                  <el-input v-model="nodeObjProperties.overrideid" disabled placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="名称">
                  <el-input v-model="nodeObjProperties.name" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col :span="12" v-if="isNode">
                <el-form-item label="分配角色">
                  <el-select v-model="nodeObjProperties.taskroleids" placeholder="请选择">
                    <el-option
                      v-for="item in assignRole"
                      :key="item.roleId"
                      :label="item.roleName"
                      :value="item.roleId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item label="阶段策略">
                  <el-button @click="stageStrategyFun(nodeObjProperties)">点击设置</el-button>
                </el-form-item>
              </el-col> -->
              <el-col :span="12" v-if="isNode">
                <el-form-item label="阶段类型">
                  <el-select v-model="nodeObjProperties.multiinstance_type" placeholder="请选择">
                    <el-option
                      v-for="item in multiinstanceTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="30">
              <el-col :span="12" v-if="!isNode">
                <el-form-item label="流转策略">
                  <el-button
                    :disabled="!nodeObjProperties.overrideid"
                    @click="sequenseflowStrategyFun(nodeObjProperties)"
                    >点击设置</el-button
                  >
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="isNode">
                <el-form-item label="阶段策略">
                  <el-button :disabled="!nodeObjProperties.overrideid" @click="stageStrategyFun(nodeObjProperties)"
                    >点击设置</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="说明">
                  <el-input type="textarea" :rows="2" v-model="nodeObjProperties.des" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="writeDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="handlebubbleEvents('goToRefTask')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
// import flowEditor from 'flow-editor-vue'
import flowEditor from '../../src/index.js'
import { AA } from './stencilData-kpm.js'
import { defaultData } from './default.js'
import { mockData } from './mockData.js'
import configure from './initConfig'
import './styles/src/index.scss'
Vue.use(flowEditor)
const userIcon = require(`../assets/images/bpmn2.0/icons/activity/list/type.user.png`)
const user2Icon = require(`../assets/images/bpmn2.0/icons/activity/list/type.user2.png`)
export default {
  name: 'FlowEditorVue',
  data() {
    return {
      showFlow: false,
      config: {
        type: 'flow',
        modelData: this.flowData,
        stencilData: AA,
        pluginConfig: {
          properties: [
            { group: 'File', index: 1 },
            { group: 'Edit', index: 2 },
            { group: 'Undo', index: 3 },
            { group: 'Alignment', index: 4 },
            { group: 'Group', index: 5 },
            { group: 'Z-Order', index: 6 },
            { group: 'Docker', index: 7 },
            { group: 'Zoom', index: 8 }
          ],
          plugins: [
            { name: 'Plugins.Loading' },
            { name: 'Plugins.CanvasResize', notUsesIn: 'xforms' },
            { name: 'Plugins.ProcessLink' },
            { name: 'Plugins.Arrangement' },
            { name: 'Plugins.Save' },
            { name: 'Plugins.View' },
            { name: 'Plugins.DragDropResize' },
            { name: 'Plugins.NodesResize' },
            { name: 'Plugins.PoolResize' },
            { name: 'Plugins.HighlightingSelectedShapes' },
            { name: 'Plugins.DragDocker' },
            { name: 'Plugins.AddDocker' },
            { name: 'Plugins.DragVisual' },
            { name: 'Plugins.SelectionFrame' },
            { name: 'Plugins.ShapeHighlighting' },
            { name: 'Plugins.Overlay' },
            { name: 'Plugins.KeysMove' },
            { name: 'Plugins.Layouter.EdgeLayouter' },
            { name: 'Plugins.BPMN2_0' },
            { name: 'Plugins.RenameShapes' },
            { name: 'Plugins.PoolAsProperty' }
            // { name: 'EndFlowPlugin', plugin: EndFlowPlugin, type: 'custom' }
          ]
        },
        editorConfigs: configure
      },
      editorManager: null,
      form: {},
      contextmenuList: [],
      selectedItem: {},
      currentShapeMode: 'read',
      writeDialog: {
        visible: false,
        componentTemplate: null
      },
      saveVisible: false,
      saveDialog: {
        name: this.flowData.name,
        key: this.flowData.key,
        errorMessage: [],
        description: this.flowData.description,
        comment: '',
        lastUpdated: this.flowData.lastUpdated,
        lastUpdatedBy: this.flowData.lastUpdatedBy,
        modelId: this.flowData.modelId,
        version: this.flowData.version,
        newversion: false
      },
      saveLoading: false,
      error: null,
      nodeStyle: {
        width: 60,
        height: 40
      },
      // 属性
      nodeObjProperties: {},
      isNode: true,
      multiinstanceTypeList: [
        {
          id: 1,
          label: '普通',
          value: 'None'
        },
        {
          id: 2,
          label: '并行',
          value: 'Parallel'
        },
        {
          id: 3,
          label: '串行',
          value: 'Sequential'
        }
      ],
      TaskNoneQuote: [
        {
          name: '属性',
          action: 'editorAttribute',
          type: 'dialog',
          dialogTitle: '属性'
        }
      ],
      edgesIncomingArrId: [],
      addFlowArr: [],
      edgesColor: '#f96157' //着色颜色
    }
  },
  // components: { propertySection, refActivity, activityTabsEdit },
  computed: {
    modelData() {
      return this.editorManager ? this.editorManager.getModel() : { properties: {} }
    }
  },
  props: {
    assignRole: {
      type: Array,
      default: () => [
        // {
        //   roleId: '1448180420544655362',
        //   roleName: '1013流程角色1',
        //   keyTypeCode: 3,
        //   procDefId: 'op_3:1:1448175583958798336',
        //   roleType: 1
        // },
        // {
        //   roleId: '1448180476094017537',
        //   roleName: '1013流程角色2',
        //   keyTypeCode: 3,
        //   procDefId: 'op_3:1:1448175583958798336',
        //   roleType: 1
        // }
      ]
    },
    flowData: {
      type: Object,
      // default: () => defaultData
      default: () => mockData
    },
    showExtendedProperties: {
      type: Boolean,
      default: () => false
    },
    isShow: {
      type: Boolean,
      default: () => false
    },
    hasFinishedNodes: {
      type: Array,
      default: () => [
        // 'startEvent1',
        // 'sid-21073A56-9672-49AF-BBDD-D04613AA61AE',
        // 'sid-EEDDA046-A034-447E-BC82-581A0F8B3872',
        // 'sid-6DE1D484-9AA7-46CD-850B-56C970B5C8ED'
      ]
    },
    curNodes: {
      type: Array,
      default: () => [
        // 'sid-44474CCA-0D02-4C33-82AF-43B508DFFD80'
      ]
    },
    todoNodes: {
      type: Array,
      default: () => [
        // 'sid-44474CCA-0D02-4C33-82AF-43B508DFFD80'
      ]
    },
    hasFinishedEdgesArr: {
      type: Array,
      default: () => [
        // 'sid-CF80ACB3-6FD2-4758-9093-FC0E29D9785B',
        // 'sid-11CD97E8-C812-4B4F-9C39-C91FF0BBEDFA',
        // 'sid-CF80ACB3-6FD2-4758-9093-FC0E29D9785B',
        // 'sid-D28263A0-C908-4200-BC92-2B1ADAE6D1E8',
        // 'sid-0C95FB7A-6AB5-44F5-BBB8-479FA429A039'
      ]
    },
    changeEdges: {
      type: Array,
      default: () => [
        // {
        //   sourceResourceId: 'sid-44474CCA-0D02-4C33-82AF-43B508DFFD80',
        //   targetResourceId: 'sid-6DE1D484-9AA7-46CD-850B-56C970B5C8ED'
        // },
        // {
        //   sourceResourceId: 'sid-6DE1D484-9AA7-46CD-850B-56C970B5C8ED',
        //   targetResourceId: 'sid-44474CCA-0D02-4C33-82AF-43B508DFFD80'
        // }
      ]
    }
  },
  created() {
    if (this.showExtendedProperties) {
      this.TaskNoneQuote.push({
        name: '扩展属性',
        action: 'moreAttribute',
        type: 'dialog',
        dialogTitle: '扩展属性'
      })
    }
  },
  mounted() {
    this.initDataFun()
    this.addChangeEdgesFun()
  },
  methods: {
    /**
     * 兼容旧数据
     */
    initDataFun() {
      this.flowData.model.childShapes.forEach(j => {
        if (j.stencil.id === 'UserTask2') {
          j.stencil.id = 'UserTask'
        }
      })
    },
    /**
     * 绘制异常线
     */
    addChangeEdgesFun() {
      // 添加异常线数据
      this.changeEdges.forEach(j => {
        this.flowData.model.childShapes.map(q => {
          if (j.sourceResourceId === q.resourceId) {
            q.outgoing.push({
              resourceId: `${q.resourceId}-red`
            })
            this.addFlowArr.push({
              resourceId: `${q.resourceId}-red`,
              properties: {
                overrideid: '',
                name: j.remark
              },
              stencil: { id: 'SequenceFlow' },
              childShapes: [],
              outgoing: [{ resourceId: j.targetResourceId }],
              // bounds: {
              //     lowerRight: { x: 395.9375, y: 178.5 },
              //   upperLeft: { x: q.bounds.upperLeft.x, y: q.bounds.upperLeft.y - this.nodeStyle.height }
              // },
              bounds: { lowerRight: { x: 585.3125, y: 85 }, upperLeft: { x: 456.6875, y: 85 } },
              dockers: [
                { x: 30, y: 20 },
                {
                  x: q.bounds.lowerRight.x - this.nodeStyle.width / 2,
                  y: q.bounds.lowerRight.y - this.nodeStyle.height - 30
                },
                {
                  x: q.bounds.lowerRight.x - this.nodeStyle.width / 2,
                  y: q.bounds.lowerRight.y - this.nodeStyle.height - 30
                },
                { x: 30, y: 20 }
              ],
              target: { resourceId: j.targetResourceId }
            })
          }
          return q
        })
      })

      // 修改异常线拐角为直角
      this.changeEdges.forEach(j => {
        this.flowData.model.childShapes.map(q => {
          if (j.targetResourceId === q.resourceId) {
            this.addFlowArr.forEach(k => {
              if (j.targetResourceId === k.target.resourceId) {
                k.dockers[0].x = 30
                k.dockers[0].y = 20
                k.dockers[2].x = q.bounds.lowerRight.x - this.nodeStyle.width / 2

                k.dockers[1].y = q.bounds.lowerRight.y - this.nodeStyle.width / 2 - 30
                k.dockers[2].y = q.bounds.lowerRight.y - this.nodeStyle.width / 2 - 30

                k.bounds.lowerRight.x = q.bounds.lowerRight.x
                k.bounds.lowerRight.y = q.bounds.lowerRight.y
              }
            })
          }
          return q
        })
      })
      // 合并异常线到流程并渲染1
      this.flowData.model.childShapes = this.flowData.model.childShapes.concat(this.addFlowArr)
      this.showFlow = true
    },
    /**
     * 初始化
     */
    editorInitCompleted(val) {
      // 连接线着色
      val.editor._canvas.edges.forEach(item => {
        // 根据流向线id着色流过的线
        if (this.hasFinishedEdgesArr.includes(item.resourceId) || item.resourceId.includes('-red')) {
          item._paths[0].style.stroke = this.edgesColor
          // 箭头着色
          const pathArr = Array.from(item._markersByPath)[0][1][1].element.getElementsByTagName('path')[0]
          pathArr.style.stroke = this.edgesColor
          pathArr.style.fill = this.edgesColor
        }

        //   const outgoingArrId = item.outgoing.map(q => {
        //     return q.resourceId
        //   })
        //   const incomingArrId = item.incoming.map(q => {
        //     return q.resourceId
        //   })
        //   this.edgesIncomingArrId.push(incomingArrId)
        //   // 完成节点之前线着色|线之后节点
        //   outgoingArrId.forEach(j => {
        //     if (this.hasFinishedNodes.includes(j) || this.curNodes.includes(j)) {
        //       item._paths[0].style.stroke = this.edgesColor
        //       // 箭头着色
        //       const pathArr = Array.from(item._markersByPath)[0][1][1].element.getElementsByTagName('path')[0]
        //       pathArr.style.stroke = this.edgesColor
        //       pathArr.style.fill = this.edgesColor
        //     }
        //   })
        //   // 完成节点之后线着色|线之前节点
        //   incomingArrId.forEach(j => {
        //     if (this.hasFinishedNodes.includes(j)) {
        //       item._paths[0].style.stroke = this.edgesColor
        //       // 箭头着色
        //       const pathArr = Array.from(item._markersByPath)[0][1][1].element.getElementsByTagName('path')[0]
        //       pathArr.style.stroke = this.edgesColor
        //       pathArr.style.fill = this.edgesColor
        //     }
        //   })
      })

      // 节点着色
      val.editor._canvas.nodes.forEach(item => {
        // 初始化区分单人多人节点显示
        const typeObj = item.properties._object.multiinstance_type
        if (typeObj === 'Parallel' || typeObj === 'Sequential') {
          item._svgShapes[0].element.setAttribute('xlink:href', user2Icon)
        } else if (typeObj === 'None') {
          item._svgShapes[0].element.setAttribute('xlink:href', userIcon)
        }
        if (this.hasFinishedNodes.includes(item.resourceId) && item._svgShapes[0]) {
          switch (item._stencil._jsonStencil.description) {
            case '任务节点':
              item._svgShapes[0].element.setAttribute(
                'xlink:href',
                require(`../assets/images/bpmn2.0/icons/activity/list/type.${
                  item.properties._object.multiinstance_type === 'None' ? 'user.red' : 'user2.red'
                }.png`)
              )
              break
            case '包含网关':
              item._svgShapes[0].element.setAttribute(
                'xlink:href',
                require(`../assets/images/bpmn2.0/icons/gateway/inclusive.red.png`)
              )
              break
            case '排他网关':
              item._svgShapes[0].element.setAttribute(
                'xlink:href',
                require(`../assets/images/bpmn2.0/icons/gateway/exclusive.databased.red.png`)
              )
              break
            case '开始':
              item._svgShapes[0].element.setAttribute(
                'xlink:href',
                require(`../assets/images/bpmn2.0/icons/activity/list/start.red.png`)
              )
              break
            case '结束':
              item._svgShapes[0].element.setAttribute(
                'xlink:href',
                require(`../assets/images/bpmn2.0/icons/activity/list/end.red.png`)
              )
              break
            default:
          }

          // item._svgShapes.forEach(q => {
          //   q.element.style.stroke = this.edgesColor
          // })
        }
        // 当前节点标蓝
        if (this.curNodes.includes(item.resourceId)) {
          item._svgShapes[1].element.style.stroke = '#2770E8'

          item._svgShapes[0].element.setAttribute(
            'xlink:href',
            require(`../assets/images/bpmn2.0/icons/activity/list/type.${
              item.properties._object.multiinstance_type === 'None' ? 'user.blue' : 'user2.blue'
            }.png`)
          )
          // let aa = item.node.getElementsByTagName('text')
          // aa[0].style.fill = '#2770E8'
        }
        // 待办节点标黄
        if (this.todoNodes.includes(item.resourceId)) {
          item._svgShapes[1].element.style.stroke = '#f5dd12'
          item._svgShapes[0].element.setAttribute(
            'xlink:href',
            require(`../assets/images/bpmn2.0/icons/activity/list/type.${
              item.properties._object.multiinstance_type === 'None' ? 'user.yellow' : 'user2.yellow'
            }.png`)
          )
        }
      })

      // 只读模式清除所有事件
      if (this.isShow) {
        this.clearAllEvents()
      }
    },
    /**
     * 点击节点/连接线
     */
    selectionChanged(event) {
      const typeId = event.selectedShape && event.selectedShape._svgShapes
      if (typeId) {
        this.isNode = true
      } else {
        this.isNode = false
      }
      if (this.currentShapeMode !== 'write') {
        this.selectedItem = event.selectedItem
        this.selectedShape = event.selectedShape
      }
    },

    /**
     * 点击保存事件
     */
    handleSaveBtn() {
      this.save()
    },

    /**
     * 保存
     */
    save() {
      let json = this.editorManager.getModel()
      json.properties = {
        ...json.properties,
        ...this.saveDialog
      }
      this.editorManager.handleEvents({
        type: 'editorSaved'
      })

      let params = {
        modeltype: this.flowData.model.modelType,
        json_xml: JSON.stringify(json),
        name: this.saveDialog.name,
        key: this.saveDialog.key,
        description: this.saveDialog.description,
        newversion: this.saveDialog.newversion,
        comment: this.saveDialog.comment,
        lastUpdated: this.saveDialog.lastUpdated
      }
      this.$emit('saveFlow', params)
    },
    /**
     * 保存模型信息后关闭弹窗
     */
    saveSuccess() {
      this.saveVisible = false
    },
    /**
     * 移除所有事件
     */
    clearAllEvents() {
      this.editorManager.clearAllEvents()
    },
    /**
     * 关闭模型信息弹窗
     */
    close() {
      this.saveVisible = false
    },
    /**
     * 刷新全局信息
     */
    stateEditorManager(editor) {
      this.editorManager = editor
    },
    /**
     * 鼠标右键
     */
    handleContextmenu({ selectedElements }) {
      if (this.isShow) return
      if (selectedElements.length === 1) {
        let currentShape = selectedElements[0]
        if (
          currentShape.getStencil().idWithoutNs() === 'UserTask' ||
          currentShape.getStencil().idWithoutNs() === 'UserTask2' ||
          currentShape.getStencil().idWithoutNs() === 'SequenceFlow'
        ) {
          // let value = currentShape.properties.get('refId')
          // this.contextmenuList = value ? TaskQuoted : TaskNoneQuote
          this.contextmenuList = this.TaskNoneQuote
        } else {
          this.contextmenuList = []
        }
        this.$refs.flowEditor.showContextmenu()
      }
    },
    /**
     * 鼠标右键点击菜单列表
     */
    handleContextmenuCommand(params) {
      if (params.action.action === 'editorAttribute') {
        this.writeDialog = {
          visible: true,
          title: params.action.dialogTitle,
          componentTemplate: params.action.componentTemplate
        }

        this.nodeObjProperties = {
          ...this.selectedShape.hiddenProperties._object,
          ...this.selectedShape.properties._object,
          overrideid: params.shape.properties._object.overrideid || params.shape.resourceId
          // overrideid: this.isNode ? `userTask_${params.shape.resourceId}` : `flow_${params.shape.resourceId}`
        }
      } else {
        this.$emit('extendedProperties', this.selectedShape)
      }
    },
    /**
     * 属性弹窗关闭之前
     */
    handlepropertyWriteClose() {
      this.currentShapeMode = 'read'
      this.writeDialog.visible = false
    },

    /**
     * 更新节点属性及名称
     */
    updatePropertyInModel({ properties, shapeId }) {
      let shape = this.selectedShape
      if (shapeId) {
        if (shape.id !== shapeId && this.previousSelectedShape && this.previousSelectedShape.id === shapeId) {
          shape = this.previousSelectedShape
        } else {
          shape = null
        }
      }

      if (!shape) {
        return
      }
      const _this = this
      let keys = Object.keys(properties)
      let changedProperties = [] // 提取有变动的属性
      keys.map(key => {
        // let newValue = property.value
        let newValue = properties[key]
        let oldValue = shape.properties.get(key)
        if (newValue !== oldValue) {
          changedProperties.push({
            key,
            oldValue,
            newValue
          })
        }
      })

      if (changedProperties.length > 0) {
        this.editorManager.assignCommand('setProperties', changedProperties, shape, _this.editorManager.getEditor())
        // this.initDataFun()
        // this.editorManager.assignCommand('MorphTo', shape, shape._stencil, this.editorManager.getEditor())

        this.editorManager.handleEvents({
          type: 'propertyWindow.propertyChanged',
          elements: [shape],
          key: keys
        })

        // Switch the property back to read mode, now the update is done
        this.currentShapeMode = 'read'
        const event = {
          type: 'event-type-property-value-changed',
          // property: property,
          // oldValue: oldValue,
          // newValue: newValue,
          properties: changedProperties,
          keys: keys
        }

        // 修改属性替换属性图片
        const typeObj = shape.properties._object.multiinstance_type

        if (typeObj === 'Parallel' || typeObj === 'Sequential') {
          shape._svgShapes[0].element.setAttribute('xlink:href', user2Icon)
        } else if (typeObj === 'None') {
          shape._svgShapes[0].element.setAttribute('xlink:href', userIcon)
        }

        this.editorManager.dispatchFlowEvent(event.type, event)
      } else {
        this.currentShapeMode = 'read'
      }
    },
    /**
     * 属性编辑保存并更新节点
     */
    // handlebubbleEvents(type, params) {
    handlebubbleEvents() {
      const overrideidVal = this.nodeObjProperties.overrideid
      let moreProperties = this.isNode
        ? {
            usertaskassignment: {
              assignment: {
                type: 'static',
                assignee: '${assignee_' + overrideidVal + '}'
              }
            }
          }
        : ''
      // 若阶段类型不为普通
      let nodeTypeVal = ''
      if (this.isNode && this.nodeObjProperties.multiinstance_type !== 'None') {
        moreProperties = {
          ...moreProperties,
          multiinstance_collection: `assignee_collection_${overrideidVal}`,
          multiinstance_variable: `assignee_${overrideidVal}`
        }
        nodeTypeVal =
          this.multiinstanceTypeList &&
          this.multiinstanceTypeList.filter(q => {
            return q.value === this.nodeObjProperties.multiinstance_type
          })[0].label
      }
      this.updatePropertyInModel({
        properties: {
          ...this.nodeObjProperties,
          ...moreProperties,
          nodeType: 'user',
          tip: nodeTypeVal
          // overrideid: overrideidVal,
        }
        // resourceId: this.isNode ? `userTask_${overrideidVal}` : `flow_${overrideidVal}`
      })
      this.writeDialog.visible = false
    },
    /**
     * 双击触发
     */
    doubleClick() {},
    /**
     * 双击改变节点后返回值
     */
    doubleClickToChangeVal() {
      // console.log('双击改变节点后返回值', params)
    },
    /**
     * 阶段策略
     */
    stageStrategyFun(obj) {
      this.$emit('stageStrategy', obj)
    },
    /**
     * 流转策略
     */
    sequenseflowStrategyFun(obj) {
      this.$emit('sequenseflowStrategy', obj)
    }
  }
}
</script>
<style lang="scss" scoped>
.flow-content {
  width: 100%;
  height: 100%;
}
::v-deep .flow-content-box {
  height: calc(100%);
  .stencils .stencil-group {
    margin: 0;
  }
  .editor-header-area {
    border: solid 1px #dfe4ed;
  }
}
.group-name ul li {
  display: block !important;
}
.stencils {
  border-right: 0;
}
::v-deep .ui-draggable {
  display: flex;
  img {
    display: block;
    margin-top: 1px;
  }
  span {
    display: block;
    margin-left: 4px;
  }
}
.edit-dialog ::v-deep .el-dialog {
  width: 720px !important;
}
.save-dialog ::v-deep .el-dialog {
  width: 580px !important;
}
// ::v-deep .editor-toolbar,
// ::v-deep .paletteHelpWrapper {
//   display: none;
// }
::v-deep .stencils .group-name + ul li {
  display: block;
}
::v-deep .paletteHelpWrapper {
  width: 40px !important;
}

::v-deep .editor-main-wrapper {
  height: 100% !important;
}
::v-deep .canvas_resize_indicator {
  display: none !important;
}
::v-deep .ORYX_Editor svg {
  background-image: none !important;
}
.el-select {
  width: 100%;
}
// 按领导要求修改样式
::v-deep .ui-draggable {
  span {
    display: none !important;
  }
  img {
    width: 20px !important;
    height: 20px !important;
    // filter: invert(22%) sepia(100%) saturate(7090%) hue-rotate(342deg) brightness(96%) contrast(110%);
  }
}
::v-deep .stencils {
  .group-name {
    display: none !important;
  }
  .stencil-group ul {
    margin: 0;
  }
  .stencil-group ul li {
    margin: 0 0 5px 3px;
  }
}
::v-deep .editor-toolbar {
  background-color: #ffffff;
  min-height: 40px;
  border-bottom: none;
  padding-left: 0px;
  .btn.btn-inverse {
    background-color: #fff !important;
    padding: 3px 5px 0px 7px !important;
    height: 34px !important;
    min-width: 34px !important;
    color: #5d6c8a;
  }
  .btn-group {
    margin: 6px 15px 6px 0px;
    border-bottom: 1px solid #dfe4ed;
  }
  .btn-group,
  .btn {
    display: block;
    margin: 0;
  }
  .pull-right {
    float: none !important;
  }
  .editor-icon {
    font-size: 24px !important;
  }
  .editor-icon-save {
    font-size: 1rem !important;
  }
}
::v-deep .contentCanvasWrapper {
  border: 1px solid #dfe4ed;
  border-left-width: 0;
}
</style>
